<template>
	<!--填写领奖信息组件-->
	<div class="box">
		<div class="wrap-box">
		<div class="center-box">
			<div class="top-box">
				<img @click="closeAddPrizeInfo" src="../../assets/images/choujiang/cj-arrow.png" />
				<p>填写领奖信息</p>
			</div>
			<p class="top-tip">请正确填写以下信息领取奖品哦~</p>
			<div class="input-middle-box">
				<ul class="input-middle-box-ul">
					<li>
						<p>姓名</p>
						<input type="" name="" id="" v-model="modelName" value="" placeholder="请填写姓名" />
					</li>
					<li>
						<p>手机</p>
						<input type="" name="" id="" v-model="modelMobile" value="" placeholder="请填写手机" />
					</li>
					<li>
						<p>地址</p>
						<textarea name="" rows="" v-model="modelAddress" cols="" placeholder="请填写详细收货地址"></textarea>
					</li>
				</ul>
			</div>
			<!--<p class="middle-tip">提交后2小时内支持修改信息</p>-->
			<div class="btn" v-if="isBtn" @click="sendAddPrizeInfo">
				提交
			</div>
			<p class="footer-tip" v-if="fromCom=='fromLivePrizeCom'">可“返回直播首页-我的-我的奖品礼券”中查看</p>
      <p v-if="isShowYinSi" class="footer-tip-privacy" @click="seeYinsi">
        <van-icon name="info-o" color="#fff" style="padding-top: 5px;"/>
        <span>隐私政策</span>
      </p>
		</div>
		<div class="close" @click="closeFooterAddPrizeInfo"></div>
		</div>
	</div>
</template>

<script>
import fun from '../../util/function'
	export default {
		props: {
			activityId: String, //抽奖活动id
			winInfo: Object, //中奖信息
			fromCom:String,//来自哪个组件
		},
		data() {
			return {
				roomId: this.$route.params.roomid, //房间id
				modelName: '',
				modelMobile: '',
				modelAddress: '',
				activityIdLoc:this.activityId,//活动id
				isBtn:true,
        plat:fun.getPlatform(),
        isShowYinSi:true,//是否展示隐私政策
			}
		},
		created() {
      if(this.$channel == 'zxjtqh'){
        if(this.getPlatform!='wx'){
            this.isShowYinSi = false //中信建投期货 只有微信展示
        }
      };
			if(this.fromCom=='fromMinePrizeCom'){//我的页面 报名信息要回填
				this.modelName = this.winInfo.userName;
				this.modelMobile = this.winInfo.mobile;
				this.modelAddress = this.winInfo.useAddress;
				this.activityIdLoc = this.winInfo.activityId;
				if(this.winInfo.expire){//过期
					this.isBtn = false;
				}
			}else{
         this.getUserInfoData();
      }
		},
		methods: {
      seeYinsi(){
        // 打开父组件的隐私政策
        this.$parent.$parent.isPrivacy = true;
      },
      getUserInfoData(){//获取用户填写信息
         this.$http.post("/lotto/getUserReceiveInfo?roomId="+this.roomId).then(res => {
         	if(res.data.code == "000000") {
             this.modelName = res.data.data.userName;
             this.modelMobile = res.data.data.mobile;
             this.modelAddress = res.data.data.address;
         	}else{

         		console.log('调用获取用户填写领奖信息数据接口报错');
         	}
         })
         .catch(response => {
         	console.log(response);
         });
      },
			sendAddPrizeInfo() {
				if(!this.modelName.length) {
					fun.toastMessage('请填写姓名');
					return
				}
				if(!this.modelMobile.length) {
					fun.toastMessage('请填写手机');
					return
				}
				if(!this.modelAddress.length) {
					fun.toastMessage('请填写收货地址');
					return
				}
				let params = {
					'activityId': this.activityIdLoc, //活动id
					'roomId': this.winInfo.roomId,
					'userName': this.modelName,
					'mobile': this.modelMobile,
					'address': this.modelAddress, //获取的奖项ID
					'prizeId': this.fromCom=='fromMinePrizeCom'?this.winInfo.activityPrizeId:this.winInfo.prizeId,
				};
				this.$http.post("/lotto/userReceiveInfo", params, {
						headers: {
							"Content-Type": "application/json"
						}
					}).then(
					res => {
						if(res.data.code == "000000") {
							fun.toastMessage('提交成功');
							this.$emit('formChildMsg', {
								type: 'closeAddPrizeAndWinCom', //关闭填写领奖信息以及中奖页面
								data: 'ruan'
							})

						} else {
							console.log('填写领奖信息返回error', res.data)
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			closeAddPrizeInfo() { //关闭领奖信息组件
				this.$emit('formChildMsg', {
					type: 'closeAddPrizeInfo',
					data: 'ruan'
				})
			},
			closeFooterAddPrizeInfo() {
				this.$emit('formChildMsg', {
					type: 'closeAddPrizeAndWinCom', //关闭填写领奖信息以及中奖页面
					data: 'ruan'
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.wrap-box{
		width:100vw;
		height: 900px;
		/*background: salmon;*/
		position: relative;
	}
	input::placeholder,
	textarea::placeholder {
		color: #E3D4CA;
		font-size: 24px;
	}

	textarea {
		width: 344px;
		height: 121px;
		background: #FFF5EE;
		padding-left: 14px;
		padding-top: 10px;
		border-radius: 3px 3px 3px 3px;
	}

	.input-middle-box-ul {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 20px 0;
	}

	.input-middle-box-ul li {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.input-middle-box-ul li p {
		font-size: 26px;
	}

	.input-middle-box-ul li input {
		width: 344px;
		height: 54px;
		background: #FFF5EE;
		/*border: 1px solid #FF5050;*/
		border-radius: 3px 3px 3px 3px;
		padding-left: 14px;
	}

	.input-middle-box-ul li p {
		width: 120px;
		/* background: sienna;*/
		text-align: right;
		margin-right: 14px;
		font-size: 28px;
		color: white;
	}

	.footer-tip {
		color: #FFE7BA;
		font-size: 24px;
		text-align: center;
	}

	.btn {
		width: 343px;
		height: 96px;
		background: linear-gradient(0deg, #FFCCAC, #FEE3D2);
		margin: 0 auto;
		border-radius: 48px;
		line-height: 96px;
		text-align: center;
		margin: 20px auto 22px;
		font-size: 38px;
		font-weight: 500;
		color: #965636;
	}

	.middle-tip {
		font-size: 22px;
		text-align: center;
		color: white;
	}

	.input-middle-box {
		width: 100%;
		height: 400px;
		font-size: 28px;
		/*background: darkgray;*/
		/*background: fuchsia;*/
	}

	.box {
		width: 100vw;
		height: 100vh;
		/*background: sandybrown;*/
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1211;
	}

	.center-box {
		width: 561px;
		height: 783px;
		background: linear-gradient(-45deg, #F84848 0%, #FF7878 100%);
		border: 2px solid #FED8C0;
		border-radius: 17px;
		margin: 0 auto;
	}

	.top-box {
		width: 100%;
		height: 70px;
		/*background: sandybrown;*/
		margin-top: 26px;
		position: relative;
	}

	.top-box img {
		width: 69px;
		height: 69px;
		position: absolute;
		top: 0;
		left: 32px;
	}

	.top-box p {
		line-height: 70px;
		text-align: center;
		font-size: 38px;
		font-weight: 500;
		color: #FFFFFF;
	}

	.top-tip {
		color: #FFFFFF;
		font-size: 24px;
		text-align: center;
		margin-top: 35px;
	}

	.close {
		width: 63px;
		height: 63px;
		background: url(../../assets/images/choujiang/cj-close.png) no-repeat;
		background-size: 63px 63px;
		/*margin: 100px auto 0;*/
		position: absolute;
		bottom: 10px;
		left: 346px;
	}
  /* 隐私政策 */
  .footer-tip-privacy{
    text-align: center;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 33px;
    margin-top: 15px
  }
</style>
